<template>
  <div class="p-d">
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="course-left">
          <div class="left-title">课程筛选</div>
          <div class="left-content">
            <div>
              <div class="left-type-title"><span>课程分类</span></div>
              <div class="left-type-ul"><span class="active">全部</span><span><span class="el-popover__reference-wrapper"><span
                      class="el-popover__reference_span el-popover__reference" aria-describedby="el-popover-6018" tabindex="0"> 党的理论
                    </span></span></span><span><span class="el-popover__reference-wrapper"><span
                      class="el-popover__reference_span el-popover__reference" aria-describedby="el-popover-2999" tabindex="0"> 学术前沿
                    </span></span></span><span>
                  <div role="tooltip" id="el-popover-4418" aria-hidden="true" class="el-popover el-popper course-type-popover" tabindex="0"
                    style="display: none;">
                    <div class="el-cascader-panel is-bordered">
                      <div class="el-scrollbar el-cascader-menu" role="menu" id="cascader-menu-2933-0">
                        <div class="el-cascader-menu__wrap el-scrollbar__wrap" style="margin-bottom: -17px; margin-right: -17px;">
                          <ul class="el-scrollbar__view el-cascader-menu__list">
                            <li role="menuitem" id="cascader-menu-2933-0-0" tabindex="-1" class="el-cascader-node"><span
                                class="el-cascader-node__label">行政管理</span></li>
                            <li role="menuitem" id="cascader-menu-2933-0-1" tabindex="-1" class="el-cascader-node"><span
                                class="el-cascader-node__label">安全保密</span></li>
                            <li role="menuitem" id="cascader-menu-2933-0-2" tabindex="-1" class="el-cascader-node"><span
                                class="el-cascader-node__label">档案管理</span></li>
                            <li role="menuitem" id="cascader-menu-2933-0-3" tabindex="-1" class="el-cascader-node"><span
                                class="el-cascader-node__label">项目管理</span></li>
                            <li role="menuitem" id="cascader-menu-2933-0-4" tabindex="-1" class="el-cascader-node"><span
                                class="el-cascader-node__label">质量管理</span></li>
                            <li role="menuitem" id="cascader-menu-2933-0-5" tabindex="-1" class="el-cascader-node"><span
                                class="el-cascader-node__label">条件保障与财务</span></li>
                            <li role="menuitem" id="cascader-menu-2933-0-6" tabindex="-1" class="el-cascader-node"><span
                                class="el-cascader-node__label">人力资源</span></li>
                            <li role="menuitem" id="cascader-menu-2933-0-7" tabindex="-1" class="el-cascader-node"><span
                                class="el-cascader-node__label">外事管理</span></li>
                            <li role="menuitem" id="cascader-menu-2933-0-8" tabindex="-1" class="el-cascader-node"><span
                                class="el-cascader-node__label">科研诚信</span></li>
                            <li role="menuitem" id="cascader-menu-2933-0-9" tabindex="-1" class="el-cascader-node"><span
                                class="el-cascader-node__label">重大设施</span></li>
                            <li role="menuitem" id="cascader-menu-2933-0-10" tabindex="-1" class="el-cascader-node"><span
                                class="el-cascader-node__label">科技条件</span></li>
                          </ul>
                        </div>
                        <div class="el-scrollbar__bar is-horizontal">
                          <div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div>
                        </div>
                        <div class="el-scrollbar__bar is-vertical">
                          <div class="el-scrollbar__thumb" style="transform: translateY(0%);"></div>
                        </div>
                      </div>
                    </div>
                  </div><span class="el-popover__reference-wrapper"><span class="el-popover__reference_span el-popover__reference"
                      aria-describedby="el-popover-4418" tabindex="0"> 科技管理 </span></span>
                </span><span>
                  <div role="tooltip" id="el-popover-2641" aria-hidden="true" class="el-popover el-popper course-type-popover" tabindex="0"
                    style="display: none;">
                    <div class="el-cascader-panel is-bordered">
                      <div class="el-scrollbar el-cascader-menu" role="menu" id="cascader-menu-9560-0">
                        <div class="el-cascader-menu__wrap el-scrollbar__wrap" style="margin-bottom: -17px; margin-right: -17px;">
                          <ul class="el-scrollbar__view el-cascader-menu__list">
                            <li role="menuitem" id="cascader-menu-9560-0-0" tabindex="-1" class="el-cascader-node"><span
                                class="el-cascader-node__label">科技战略</span></li>
                            <li role="menuitem" id="cascader-menu-9560-0-1" tabindex="-1" class="el-cascader-node"><span
                                class="el-cascader-node__label">科研基础知识</span></li>
                            <li role="menuitem" id="cascader-menu-9560-0-2" tabindex="-1" class="el-cascader-node"><span
                                class="el-cascader-node__label">科技安全</span></li>
                            <li role="menuitem" id="cascader-menu-9560-0-3" tabindex="-1" class="el-cascader-node"><span
                                class="el-cascader-node__label">科研软件</span></li>
                            <li role="menuitem" id="cascader-menu-9560-0-4" tabindex="-1" class="el-cascader-node"><span
                                class="el-cascader-node__label">仪器平台</span></li>
                            <li role="menuitem" id="cascader-menu-9560-0-5" tabindex="-1" class="el-cascader-node"><span
                                class="el-cascader-node__label">信息素养</span></li>
                            <li role="menuitem" id="cascader-menu-9560-0-6" tabindex="-1" class="el-cascader-node"><span
                                class="el-cascader-node__label">实验技术</span></li>
                            <li role="menuitem" id="cascader-menu-9560-0-7" tabindex="-1" class="el-cascader-node"><span
                                class="el-cascader-node__label">科学传播</span></li>
                            <li role="menuitem" id="cascader-menu-9560-0-8" tabindex="-1" class="el-cascader-node"><span
                                class="el-cascader-node__label">科技成果转化</span></li>
                            <li role="menuitem" id="cascader-menu-9560-0-9" tabindex="-1" class="el-cascader-node"><span
                                class="el-cascader-node__label">论文写作与学术规范</span></li>
                          </ul>
                        </div>
                        <div class="el-scrollbar__bar is-horizontal">
                          <div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div>
                        </div>
                        <div class="el-scrollbar__bar is-vertical">
                          <div class="el-scrollbar__thumb" style="transform: translateY(0%);"></div>
                        </div>
                      </div>
                    </div>
                  </div><span class="el-popover__reference-wrapper"><span class="el-popover__reference_span el-popover__reference"
                      aria-describedby="el-popover-2641" tabindex="0"> 科研技能 </span></span>
                </span><span>
                  <div role="tooltip" id="el-popover-4871" aria-hidden="true" class="el-popover el-popper course-type-popover" tabindex="0"
                    style="display: none;">
                    <div class="el-cascader-panel is-bordered">
                      <div class="el-scrollbar el-cascader-menu" role="menu" id="cascader-menu-3705-0">
                        <div class="el-cascader-menu__wrap el-scrollbar__wrap" style="margin-bottom: -17px; margin-right: -17px;">
                          <ul class="el-scrollbar__view el-cascader-menu__list">
                            <li role="menuitem" id="cascader-menu-3705-0-0" tabindex="-1" class="el-cascader-node"><span
                                class="el-cascader-node__label">科学普及</span></li>
                            <li role="menuitem" id="cascader-menu-3705-0-1" tabindex="-1" class="el-cascader-node"><span
                                class="el-cascader-node__label">科学精神</span></li>
                            <li role="menuitem" id="cascader-menu-3705-0-2" tabindex="-1" class="el-cascader-node"><span
                                class="el-cascader-node__label">科技创新</span></li>
                            <li role="menuitem" id="cascader-menu-3705-0-3" tabindex="-1" class="el-cascader-node"><span
                                class="el-cascader-node__label">科技史苑</span></li>
                            <li role="menuitem" id="cascader-menu-3705-0-4" tabindex="-1" class="el-cascader-node"><span
                                class="el-cascader-node__label">文史哲学</span></li>
                            <li role="menuitem" id="cascader-menu-3705-0-5" tabindex="-1" class="el-cascader-node"><span
                                class="el-cascader-node__label">政法经济</span></li>
                            <li role="menuitem" id="cascader-menu-3705-0-6" tabindex="-1" class="el-cascader-node"><span
                                class="el-cascader-node__label">科学艺术</span></li>
                            <li role="menuitem" id="cascader-menu-3705-0-7" tabindex="-1" class="el-cascader-node"><span
                                class="el-cascader-node__label">国防外交</span></li>
                            <li role="menuitem" id="cascader-menu-3705-0-8" tabindex="-1" class="el-cascader-node"><span
                                class="el-cascader-node__label">身心健康</span></li>
                          </ul>
                        </div>
                        <div class="el-scrollbar__bar is-horizontal">
                          <div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div>
                        </div>
                        <div class="el-scrollbar__bar is-vertical">
                          <div class="el-scrollbar__thumb" style="transform: translateY(0%);"></div>
                        </div>
                      </div>
                    </div>
                  </div><span class="el-popover__reference-wrapper"><span class="el-popover__reference_span el-popover__reference"
                      aria-describedby="el-popover-4871" tabindex="0"> 素质能力 </span></span>
                </span><span>
                  <div role="tooltip" id="el-popover-9530" aria-hidden="true" class="el-popover el-popper course-type-popover" tabindex="0"
                    style="display: none;">
                    <div class="el-cascader-panel is-bordered">
                      <div class="el-scrollbar el-cascader-menu" role="menu" id="cascader-menu-6539-0">
                        <div class="el-cascader-menu__wrap el-scrollbar__wrap" style="margin-bottom: -17px; margin-right: -17px;">
                          <ul class="el-scrollbar__view el-cascader-menu__list">
                            <li role="menuitem" id="cascader-menu-6539-0-0" tabindex="-1" class="el-cascader-node"><span
                                class="el-cascader-node__label">新员工入职培训</span></li>
                            <li role="menuitem" id="cascader-menu-6539-0-1" tabindex="-1" class="el-cascader-node"><span
                                class="el-cascader-node__label">科研骨干培训</span></li>
                            <li role="menuitem" id="cascader-menu-6539-0-2" tabindex="-1" class="el-cascader-node"><span
                                class="el-cascader-node__label">所局级领导培训</span></li>
                          </ul>
                        </div>
                        <div class="el-scrollbar__bar is-horizontal">
                          <div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div>
                        </div>
                        <div class="el-scrollbar__bar is-vertical">
                          <div class="el-scrollbar__thumb" style="transform: translateY(0%);"></div>
                        </div>
                      </div>
                    </div>
                  </div><span class="el-popover__reference-wrapper"><span class="el-popover__reference_span el-popover__reference"
                      aria-describedby="el-popover-9530" tabindex="0"> 成长路径 </span></span>
                </span></div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="20">
        <div class="p-d b-f m-b">
          <SearchComp :searchForm="searchForm" :searchData="queryString" :searchAction="searchAction"></SearchComp>
        </div>
        <div class="course-right p-d b-f">
          <div class="course-list vertical">
            <div v-for="(item, index) in 9" :key="index" class="course-item pic-text-cur">
              <div class="course-item-img">
                <div class="el-image" style="width: 100%; height: 100%;">
                  <img src="@/assets/img/课程应用图片.jpg" class="el-image__inner">
                </div>
              </div>
              <div class="el-tooltip course-item-title ellipsisThree item" aria-describedby="el-tooltip-5756" tabindex="0">
                常见有机质谱的类型及应用介绍
              </div>
              <div class="el-tooltip course-item-school ellipsis item" aria-describedby="el-tooltip-7017" tabindex="0">南海海洋研究所
              </div>
              <div class="course-item-bottom">
                <div class="el-tooltip course-item-user ellipsis item" aria-describedby="el-tooltip-4943" tabindex="0">陈子龙</div>
                <div class="rate-index">
                  <el-rate v-model="value2" :colors=" ['#99A9BF', '#F7BA2A', '#FF9900']">
                  </el-rate>
                </div>
                <img src="@/assets/img/视频资源.png" alt="" class="course-item-btn">
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value2: 5,
      queryParams: {
        total: 9,
        currentPage: 1,
        pageSize: 10
      },
      queryString: {
        title: '',
        source: ''
      },
      searchForm: {
        changeMethod: () => {
          this.queryParams.currentPage = 1
        },
        formData: [
          {
            type: 'Input',
            label: '资源名称',
            prop: 'title',
            clearable: true,
            icon: 'el-icon-search',
            placeholder: '请输入标题'
          },
        ]
      },
      searchAction: [
        {
          label: '查询',
          type: 'primary',
          handle: () => {
            this.queryParams.currentPage = 1
            this.$refs.multipleTable.clearSelection()
          }
        },
        {
          label: '重置',
          type: 'primary',
          plain: true,
          handle: () => {
            this.queryString = {
              title: '',
              source: ''
            }
            this.queryParams.currentPage = 1
          }
        }
      ],
    }
  },
}
</script>

<style lang="less" scoped>
  .course-left {
    padding: 16px 16px 16px 14px;
    background: #fff;
    -webkit-box-shadow: 0 2px 12px 0 #e3e3e3;
    box-shadow: 0 2px 12px 0 #e3e3e3;
    min-height: 90vh;
  }
  .left-title {
    padding-left: 20px;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    line-height: 25px;
    background: url()
      0 no-repeat;
    background-size: 20px 20px;
  }
  .left-content {
  }
  .left-type-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 4px 0 10px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    line-height: 34px;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(23, 107, 252, 0.7)), to(rgba(22, 68, 243, 0.7)));
    background: linear-gradient(180deg, rgba(23, 107, 252, 0.7), rgba(22, 68, 243, 0.7));
  }
  .left-type-ul {
    padding: 18px 10px 0 10px;
    font-size: 16px;
    font-weight: 400;
    color: #666;
    line-height: 22px;
    > span {
      display: inline-block;
      margin-right: 15px;
      margin-bottom: 13px;
      cursor: pointer;
      outline: none;
      &.active {
        color: #3a56b6;
        font-weight: 600;
      }
    }
  }
  .course-right {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 16px;
    .course-list {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      justify-content: space-between;
      padding-top: 16px;
    }
    .course-item {
      width: 31%;
      margin: 0 0 16px;
      border: 1px solid #f0f0f0;
      background: #fff;
      border-radius: 0.02rem;
      overflow: hidden;
      .course-item-img {
        position: relative;
        width: 100%;
        height: 153px;
        margin-bottom: 10px;
        overflow: hidden;
      }
      .course-item-title {
        padding: 0 10px 20px 17px;
        font-size: 18px;
        font-weight: 600;
        color: #333;
        line-height: 25px;
        background: url()
          left 3px no-repeat;
        background-size: 5px 23px;
      }
      .course-item-school {
        margin-top: 6px;
        padding: 0 17px;
        font-size: 14px;
        font-weight: 400;
        color: #666;
        line-height: 20px;
      }
      .course-item-bottom {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding-left: 17px;
        .course-item-user {
          max-width: 90px;
          padding-left: 16px;
          background: url()
            0 no-repeat;
          background-size: 12px 12px;
          font-size: 14px;
          font-weight: 400;
          color: #666;
          line-height: 20px;
        }
        .course-item-btn {
          width: 73px;
        }
      }
    }
  }
  .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>